<template>
  <div class="header-wrap">
    <img src="@/assets/images/list/sub-title.png" alt="标题" class="header-img" />
  </div>
  <LoginRegisterComVue></LoginRegisterComVue>
  <div class="page-banner-wrap">
    <img src="@/assets/images/list/sub-banner.png" alt="banner" class="banner-img" />
  </div>
  <div class="page-title-wrap">科技型企业白名单</div>
  <div class="search-wrap">
    <el-input
      class="input-with-select"
      style="
        height: 48px;
        --el-input-hover-border-color: #015293;
        --el-input-border-color: #015293;
        --el-input-focus-border-color: #015293;
        font-size: 16px;
      "
      v-model="input2"
      placeholder="请输入关键词"
      :prefix-icon="Search"
    >
      <template #append>
        <el-button
          style="
            height: 100%;
            width: 122px;
            font-size: 16px;
            color: #fff;
            background: #015293;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
          "
          >搜索</el-button
        ></template
      >
    </el-input>
  </div>
  <div class="table-wrap">
    <div class="table-content">
      <el-table
        :data="tableData"
        :default-sort="{ prop: 'stage', order: 'descending' }"
        style="width: 100%"
      >
        <el-table-column prop="stage" label="阶段" sortable />
        <el-table-column prop="level" label="级别" sortable />
        <el-table-column prop="companyName" label="企业名称" />
        <el-table-column prop="address" label="详细地址" />
        <el-table-column prop="linkman" label="联系人" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="region" label="所属区域" />
      </el-table>
    </div>
    <div class="page-wrap">
      <div class="pagination-container" style="--el-color-primary: #0034b5">
        <el-pagination background layout="total,prev, pager, next" :total="350" />
      </div>
    </div>
  </div>
</template>

<script setup>
import LoginRegisterComVue from '@/components/LoginRegisterCom.vue'
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
const input2 = ref('')
const tableData = [
  {
    stage: '',
    level: '',
    companyName: '人才数科',
    address: '',
    linkman: '',
    phone: '',
    region: ''
  },
  {
    stage: '',
    level: '',
    companyName: '人才数科',
    address: '',
    linkman: '',
    phone: '',
    region: ''
  },
  {
    stage: '',
    level: '',
    companyName: '人才数科',
    address: '',
    linkman: '',
    phone: '',
    region: ''
  },
  {
    stage: '',
    level: '',
    companyName: '人才数科',
    address: '',
    linkman: '',
    phone: '',
    region: ''
  },
  {
    stage: '',
    level: '',
    companyName: '人才数科',
    address: '',
    linkman: '',
    phone: '',
    region: ''
  }
]
</script>

<style lang="scss" scoped>
.header-wrap {
  position: absolute;
  top: 18px;
  left: 29px;
  width: 33.65%;
}
.header-wrap .header-img {
  width: 100%;
}
.page-banner-wrap {
  height: 200px;
}

.page-banner-wrap .banner-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.page-title-wrap {
  height: 42px;
  font-size: 32px;
  font-family:
    Microsoft YaHei-Bold,
    Microsoft YaHei;
  font-weight: 700;
  color: #fff;
  line-height: 36px;
  position: absolute;
  top: 125px;
  left: 220px;
  padding-left: 22px;
}

.page-title-wrap:before {
  width: 6px;
  height: 34px;
  background: #fff;
  border-radius: 2px 2px 2px 2px;
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.search-wrap {
  width: 579px;
  margin: 40px auto 0;
}

.table-wrap {
  width: 1480px;
  margin: 40px auto 0;
}

.table-content :deep(th) {
    height: 54px;
    background: #ecf2fe;
    font-size: 18px;
    font-family: Microsoft YaHei-Bold,Microsoft YaHei;
    font-weight: 700;
    color: #333
}

.table-content :deep(td) {
    height: 54px;
    font-size: 16px;
    font-family: Microsoft YaHei-Regular,Microsoft YaHei;
    font-weight: 400;
    color: #2c2c2c
}

.page-wrap {
  height: 54px;
  background: #f6f9ff;
  text-align: right;
  padding-right: 32px;    
}
.page-wrap .pagination-container {
  display: inline-block;
  vertical-align: top;
  background-color: transparent;
  padding: 11px 0;
}
.header-cell-class-name {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}
</style>
